<template>
  <el-row type="flex" class="row-bg" justify="space-between" style="margin-top:30px;margin-left:20px">
    <el-col :span="8">
      <div class="filter-container">
        <el-date-picker
          v-model="times"
          class="filter-item"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 250px;"
          type="daterange"
          value-format="yyyy-MM-dd"
        />
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
          搜索
        </el-button>
      </div>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="tableData"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="编号" prop="id" align="center" width="80">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="显示申请数量" width="150" align="center">
          <template slot-scope="{row}">
            <span>{{ row.applyCount }}</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.current"
        :limit.sync="listQuery.size"
        @pagination="appCount"
      />
    </el-col>
    <el-col :span="16">
      <div id="myChart" :class="className" :style="{height:height,width:width}" />
    </el-col>
  </el-row>

</template>

<script>
import { appCount } from '@/api/sys'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'
// 按需引入 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  name: 'CountChannel',
  components: { Pagination },
  directives: { waves },
  filters: {
    number(value) {
      return parseFloat(value).toFixed(2)
    }
  },
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '1000px'
    },
    height: {
      type: String,
      default: '300px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      tableData: [
        { id: 1 },
        { id: 2 },
        { id: 3 }
      ],
      dayData: [],
      listQuery: {
        current: 1,
        size: 10,
        startTime: '',
        endTime: ''
      },
      times: [],
      daytimes: {
        startTime: ['', ''],
        endTime: '',
        current: 1,
        size: 30
      },
      dayId: 0,
      daydialogFormVisible: false,
      dialogPvVisible: false,
      listLoading: false,
      total: 0,
      daytotal: 0,
      xData: [],
      yData: [],
      tableKey: 0
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.appCount(this.listQuery)
    this.initCharts()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('myChart'))
      this.setOptions(this.chartData)
    },
    // 获取列表
    async appCount(listQuery) {
      if (this.times == null) {
        this.listQuery.endTime = ''
        this.listQuery.startTime = ''
      } else if (this.times.length === 0) {
        this.listQuery.endTime = ''
        this.listQuery.startTime = ''
      } else {
        this.listQuery.endTime = this.times[1]
        this.listQuery.startTime = this.times[0]
      }
      const res = await appCount(this.listQuery)
      this.tableData = res.data.data.records
      this.xData = []
      this.yData = []
      this.tableData.forEach(element => {
        this.xData.push(element.appName)
        this.yData.push(element.applyCount)
      })
      console.log(this.xData)
      this.initChart()
      this.total = res.data.data.total
    },
    handleFilter() {
      this.listQuery.current = 1
      if (this.listQuery.startTime === null) {
        this.listQuery.startTime = ''
      }
      if (this.listQuery.endTime === null) {
        this.listQuery.endTime = ''
      }
      this.appCount(this.listQuery)
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        title: {
          text: '标题'
        },
        tooltip: {},
        xAxis: {
          data: this.xData
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: this.yData
        }]
      })
    }
  }
}
</script>

<style scoped>
.cap{
  opacity: .5;
}
</style>
